<template>
  <div class="bg-#FAFAFA min-h-100vh">
    <div class="p-2rem line" @click="goShop">
      <div class="font-size-1.6rem m-b-0.6rem">{{ shop.name }}</div>
      <div class="flex items-center">
        <img class="w-1.4rem h-1.4rem m-r-0.2rem" src="../../assets/images/address.png" />
        <div class="font-size:1.2rem">{{ $t('home.order.distance') }}{{ shop.distance }}</div>
      </div>
    </div>

    <div class="content flex">
      <div class="cates">
        <div v-for="(item, idx) in catesVO" class="cate" :class="{ active: item.checked }" :key="item.id" @click="chooseCate(item, idx)">
          <img :src="item.img" class="cate-img" v-if="item.img" />
          <div>
            <img :src="item.icon" class="cate-icon" v-if="item.icon" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="products">
        <div v-for="item in catesVO" :key="item.id" ref="goodsRef">
          <div class="color-#333 font-size-1.4rem p-y-1rem">{{ item.name }}</div>
          <div class="product" v-for="p in item.products" :key="p.id">
            <div>
              <img class="cover" :src="p.icon" />
            </div>
            <div class="flex-1">
              <div class="color-#333 font-size-1.4rem">{{ p.name }}</div>
              <div class="color-#B1B1B1 font-size-1.2rem p-y-1.1rem">{{ p.intro }}</div>
              <div class="flex justify-between">
                <div class="font-size-1.6rem">{{ p.normalPrice }}</div>
                <div class="button" @click="product(p)">{{ $t('home.order.spe') }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-50px"></div>
      </div>
    </div>

    <div class="cart" v-if="store.drinks.length > 0">
      <div class="flex items-center" @click="showCart">
        <div>
          <van-badge :content="amount">
            <van-icon size="20px" name="bag-o" />
          </van-badge>
        </div>
        <div class="m-l-16px font-size-1.6rem">{{ total }}</div>
      </div>
      <div class="submit" @click="buy">{{ $t('home.order.submit') }}</div>
    </div>

    <van-action-sheet v-model:show="show" :z-index="100">
      <div class="sheet">
        <div class="flex justify-between items-center order" v-for="item in store.drinks" :key="item.id">
          <div>
            <div class="font-600 font-size-1.3rem">{{ showName(item) }}</div>
            <div class="font-size-1.0rem m-y-2px">{{ item.size }}/{{ showCold(item.cold!) }}/{{ showSugar(item.sugar!) }}</div>
            <div class="font-size-1.3rem">{{ item.price * item.amount }}</div>
          </div>
          <div>
            <van-config-provider :theme-vars="themeVars">
              <van-stepper
                @change="(v: number) => changeNum(v, item)"
                v-model="item.amount"
                theme="round"
                button-size="22"
                min="0"
                max="100"
                disable-input
              />
            </van-config-provider>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup lang="ts">
interface ApiCategoryVO extends ApiCategory {
  checked?: boolean
  name?: string
  products?: ApiProduct[]
}

const catesVO = ref<ApiCategoryVO[]>()
const shop = ref<ApiShop>({} as ApiShop)
const router = useRouter()
const goodsRef = ref<HTMLElement[]>([])
const store = useAppStore()
const show = ref(false)

const chooseCate = (item: ApiCategoryVO, idx: number) => {
  catesVO.value?.forEach(c => (c.checked = false))
  item.checked = true

  const goodItem = goodsRef.value[idx]
  if (goodItem) {
    goodItem.scrollIntoView({ behavior: 'smooth' }) // smooth滚动效果
  }
}

onMounted(async () => {
  const cacheShop = cache.getShop()
  if (cacheShop) {
    shop.value = cacheShop
    initProduct()
  } else {
    // 还未选择门店，跳转至门店选择
    goShop()
  }
})

const themeVars = reactive({
  stepperButtonRoundThemeColor: '#3aa1a2'
})

const amount = computed(() => {
  let i = 0
  store.drinks.forEach(s => (i += s.amount))
  return i
})

const total = computed(() => {
  let i = 0
  store.drinks.forEach(s => (i += s.price! * s.amount))
  return i
})

const initProduct = () => {
  apis.api.userShopProductCateAll({ drink: true }).then(d => {
    d.cates?.forEach(c => ((c as ApiCategoryVO).products = d.products!.filter(p => p.categoryId == c.id)))
    catesVO.value = d.cates
  })
}

const goShop = () => {
  router.push('/shop')
}

function product(product: ApiProduct) {
  store.product = product
  router.push('/drinkDetail')
}

function showCart() {
  show.value = true
}

function buy() {
  router.push('/submit?n=drink')
}

function changeNum(value: number, order: ApiOrderProductInfo) {
  if (value == 0) {
    store.drinks = store.drinks.filter(o => o.id != order.id)
    if (store.drinks.length < 1) {
      show.value = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
.cates {
  width: 90px;
  overflow-y: scroll;
  .cate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    padding: 16px 8px;
    background-color: #f6f5f5;
  }
  .active {
    background-color: #fafafa;
  }
  .cate-img {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
  }
  .cate-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}
.products {
  padding: 0 1.4rem;
  overflow-y: scroll;
}

.line {
  border: 1px solid #f3f3f3;
}

.product {
  display: flex;
  margin-top: 1rem;
  .cover {
    width: 10rem;
    height: 10rem;
    margin-right: 12px;
  }
}

.button {
  background: linear-gradient(180deg, #68cacb 0%, #3aa1a2 100%);
  border-radius: 1.8rem 1.8rem 1.8rem 1.8rem;
  font-size: 1.2rem;
  color: #fff;
  padding: 0.4rem 1.3rem;
}

.cart {
  display: flex;
  z-index: 200;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 30px;
  height: 40px;
  color: #fff;
  position: fixed;
  background-color: #333333;
  bottom: 60px;
  margin: 0 20px;
  overflow: hidden;
  width: calc(100vw - 40px);

  .submit {
    width: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: linear-gradient(180deg, #68cacb 0%, #3aa1a2 100%);
  }
}

.sheet {
  padding: 10px 20px 110px;
}

.order {
  border-bottom: 1px solid #dcdcdc;
  padding: 10px 0;
  &:last-child {
    border-bottom: none;
  }
}
</style>
